import { Shape, Graph } from '@antv/x6';

export const FnButtonConfig = [
  // {
  //   id: 'empty',
  //   title: '清空设计',
  //   iconClass: 'icon-delete',
  // },
  //   {
  //     id: 'GenerateClusters',
  //     title: '生成集群',
  //     iconClass: 'icon-jiqun',
  //   },
  {
    id: 'DeploymentCluster',
    title: '保存',
    iconClass: 'icon-jiqun',
  },
  {
    id: 'fitCenter',
    title: '适应屏幕',
    iconClass: 'icon-shiyingpingmu',
  },
  {
    id: 'Undo',
    title: '撤销',
    iconClass: 'icon-weibiaoti545',
  },
  {
    id: 'Redo',
    title: '还原',
    iconClass: 'icon-huitui',
  },
];

//  高亮
const magnetAvailabilityHighlighter = {
  name: 'stroke',
  args: {
    attrs: {
      stroke: '#47C769',
    },
  },
};

export const GraphConfig: any = {
  autoResize: true,
  background: {
    color: '#fff', // 设置画布背景颜色
  },
  grid: {
    size: 10, // 网格大小 10px
    visible: true, // 渲染网格背景
    type: 'doubleMesh',
    args: [
      {
        color: '#E7E8EA',
        thickness: 1,
      },
      {
        color: '#CBCED3',
        thickness: 1,
        factor: 5,
      },
    ],
  },
  scroller: {
    enabled: true,
    pannable: {
      // 画布平移-右键
      enabled: true,
      eventTypes: ['rightMouseDown'],
    },
  },
  highlighting: {
    magnetAvailable: magnetAvailabilityHighlighter,
    magnetAdsorbed: {
      name: 'stroke',
      args: {
        attrs: {
          fill: '#5F95FF',
          stroke: '#5F95FF',
        },
      },
    },
  },
  interacting: {
    nodeMovable: true, // 默认值(true):节点可以移动,false 禁止节点移动
  },
  mousewheel: {
    enabled: true,
    zoomAtMousePosition: true,
    modifiers: 'ctrl',
    minScale: 0.5,
    maxScale: 3,
  },
  connecting: {
    router: {
      name: 'orth',
    },
    connector: {
      name: 'rounded',
      args: {
        radius: 8,
      },
    },
    highlight: true,
    allowLoop: false,
    allowMulti: false,
    allowPort: true,
    anchor: {
      name: 'center',
    },
    allowBlank: false,
    snap: {
      radius: 20,
    },
    createEdge() {
      return new Shape.Edge({
        attrs: {
          line: {
            stroke: '#A2B1C3',
            strokeWidth: 2,
            targetMarker: {
              name: 'block',
              width: 12,
              height: 8,
            },
          },
        },
        data: {
          not_delete: true,
        },
        zIndex: 0,
      });
    },
    // validateConnection: () => false,
  },
  resizing: true, // 缩放节点
  rotating: true, // 旋转节点，
  // 点选/框选
  selecting: {
    enabled: true,
    rubberband: true,
    showNodeSelectionBox: true,
  },
  snapline: true, // 对齐线
  history: true, // 开启画布撤销/重做能力。
};
export const ports = {
  groups: {
    top: {
      position: 'top',
      attrs: {
        circle: {
          r: 6,
          magnet: true, // 当 magnet 属性为 true 时，表示该元素可以被链接，即在连线过程中可以被当做连线的起点或终点，与链接桩类似。
          stroke: '#2D8CF0',
          strokeWidth: 1,
          fill: '#fff',
          style: {
            visibility: 'hidden',
          },
        },
      },
    },
    bottom: {
      position: 'bottom',
      attrs: {
        circle: {
          r: 6,
          magnet: true,
          stroke: '#2D8CF0',
          strokeWidth: 1,
          fill: '#fff',
          style: {
            visibility: 'hidden',
          },
        },
      },
    },
    left: {
      position: 'left',
      attrs: {
        circle: {
          r: 6,
          magnet: true,
          stroke: '#2D8CF0',
          strokeWidth: 1,
          fill: '#fff',
          style: {
            visibility: 'hidden',
          },
        },
      },
    },
    right: {
      position: 'right',
      attrs: {
        circle: {
          r: 6,
          magnet: true,
          stroke: '#2D8CF0',
          strokeWidth: 1,
          fill: '#fff',
          style: {
            visibility: 'hidden',
          },
        },
      },
    },
  },
  items: [
    {
      group: 'top',
    },
    {
      group: 'bottom',
    },
    {
      group: 'left',
    },
    {
      group: 'right',
    },
  ],
};
export const defaultMyComponentRectConfig = {
  width: 100,
  height: 100,
  shape: 'react-shape',
  component: 'react-node',
  visible: true, // 是否可见
  ports,
};
export const shapeFn = () => {
  Graph.registerNode(
    'custom-image',
    {
      inherit: 'image',
      width: 44,
      height: 44,
      ports,
      visible: true, // 是否可见
    },
    true
  );

  // Graph.registerNode(
  //   'custom-image',
  //   {
  //     // inherit: 'rect',
  //     width: 52,
  //     height: 52,
  //     // markup 指定了渲染节点/边时使用的 SVG/HTML 片段，使用 JSON 格式描述.
  //     markup: [
  //       {
  //         tagName: 'rect', // SVG/HTML 元素标签名。
  //         selector: 'body', // SVG/HTML 元素的唯一标识，通过该唯一标识为该元素指定属性样式。
  //       },
  //       {
  //         tagName: 'image',
  //       },
  //       {
  //         tagName: 'text',
  //         selector: 'label',
  //       },
  //     ],
  //     attrs: {
  //       body: {
  //         stroke: '#5F95FF',
  //         fill: '#5F95FF',
  //         refWidth: 1, //  矩形宽度为节点宽
  //         refHeight: 1, //  矩形高度为节点高
  //       },
  //       image: {
  //         width: 26,
  //         height: 26,
  //         refX: 13,
  //         refY: 16,
  //       },
  //       label: {
  //         refX: 3,
  //         refY: 2,
  //         textAnchor: 'left',
  //         textVerticalAnchor: 'top',
  //         fontSize: 12,
  //         fill: '#fff',
  //       },
  //     },
  //     ports: {
  //       groups: {
  //         left: {
  //           attrs: {
  //             circle: {
  //               r: 4,
  //               magnet: true,
  //               stroke: '#31d0c6',
  //               strokeWidth: 2,
  //               fill: '#fff',
  //               style: {
  //                 visibility: 'hidden',
  //               },
  //             },
  //           },
  //           position: {
  //             name: 'left',
  //             args: {},
  //           },
  //         },
  //         right: {
  //           attrs: {
  //             circle: {
  //               r: 4,
  //               magnet: true,
  //               stroke: '#31d0c6',
  //               strokeWidth: 2,
  //               fill: '#fff',
  //               style: {
  //                 visibility: 'hidden',
  //               },
  //             },
  //           },
  //           position: {
  //             name: 'right',
  //             args: {},
  //           },
  //         },
  //         top: {
  //           attrs: {
  //             circle: {
  //               r: 4,
  //               magnet: true,
  //               stroke: '#31d0c6',
  //               strokeWidth: 2,
  //               fill: '#fff',
  //               style: {
  //                 visibility: 'hidden',
  //               },
  //             },
  //           },
  //           position: {
  //             name: 'top',
  //             args: {},
  //           },
  //         },
  //         bottom: {
  //           attrs: {
  //             circle: {
  //               r: 4,
  //               magnet: true,
  //               stroke: '#31d0c6',
  //               strokeWidth: 2,
  //               fill: '#fff',
  //               style: {
  //                 visibility: 'hidden',
  //               },
  //             },
  //           },
  //           position: {
  //             name: 'bottom',
  //             args: {},
  //           },
  //         },
  //       },
  //       items: [
  //         {
  //           group: 'top',
  //         },
  //         {
  //           group: 'right',
  //         },
  //         {
  //           group: 'bottom',
  //         },
  //         {
  //           group: 'left',
  //         },
  //       ],
  //     },
  //   },
  //   true
  // );
};

export const menuConfig = [
  {
    id: '#1',
    title: '主机',
    children: [
      {
        id: '#1-1',
        title: '服务器',
      },
      {
        id: '#1-2',
        title: '云虚拟机',
      },
    ],
  },
  {
    id: '#2',
    title: '网络设备',
    children: [
      {
        id: '#2-1',
        title: '路由器',
      },
      {
        id: '#2-2',
        title: '交换机',
      },
    ],
  },
  {
    id: '#3',
    title: '安全设备',
    children: [
      {
        id: '#3-1',
        title: '防火墙',
      },
      {
        id: '#3-2',
        title: '网闸',
      },
      {
        id: '#3-3',
        title: 'IDS',
      },
      {
        id: '#3-4',
        title: 'IPS',
      },
      {
        id: '#3-5',
        title: 'UTM',
      },
    ],
  },
  {
    id: '#4',
    title: '存储设备',
    children: [
      {
        id: '#4-1',
        title: '磁盘阵列',
      },
      {
        id: '#4-2',
        title: '磁带库',
      },
      {
        id: '#4-3',
        title: '云存储',
      },
    ],
  },
];
